<!-- index.vue：测评管理的主页面 -->
<template>
  <div class="assessment-management">
    <!-- 搜索和筛选区域 -->
    <div class="search-section">
      <el-card>
        <el-form :model="searchForm" inline>
          <el-form-item label="关键词搜索">
            <el-input v-model="searchForm.keyWords" placeholder="请输入测评名称关键词" clearable />
          </el-form-item>
          <el-form-item label="分类">
            <el-select v-model="searchForm.category_id" placeholder="请选择分类" clearable>
              <el-option label="就业" value="jiuye" />
              <el-option label="学习" value="study" />
              <el-option label="情感" value="emotion" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">搜索</el-button>
            <el-button @click="handleReset">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>

    <!-- 测评列表 -->
    <div class="assessment-list">
      <el-card>
        <div slot="header" class="card-header">
          <span>测评列表</span>
          <el-button type="primary" size="small" @click="showAddAssessmentDialog">
            添加测评
          </el-button>
        </div>

        <el-table v-loading="loading" :data="assessmentList" style="width: 100%">
          <el-table-column prop="id" label="ID" width="80" />
          <el-table-column prop="name" label="测评名称" min-width="150" show-overflow-tooltip />
          <el-table-column prop="introduction" label="介绍" min-width="200" show-overflow-tooltip />
          <el-table-column prop="categoryId" label="分类" width="100">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.categoryId === 'jiuye'" type="success">就业</el-tag>
              <el-tag v-else-if="scope.row.categoryId === 'study'" type="primary">学习</el-tag>
              <el-tag v-else-if="scope.row.categoryId === 'emotion'" type="warning">情感</el-tag>
              <el-tag v-else type="info">{{ scope.row.categoryId }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="questionsCount" label="题目数" width="80" />
          <el-table-column prop="coverImgUrl" label="封面" width="120">
            <template slot-scope="scope">
              <el-image
                style="width: 80px; height: 50px; cursor: pointer"
                :src="getCoverUrl(scope.row)"
                fit="cover"
                :preview-src-list="[getCoverUrl(scope.row)]"
                @error="() => onCoverError(scope.row)"
              />
            </template>
          </el-table-column>
          <el-table-column prop="createdAt" label="创建时间" width="150" />
          <el-table-column label="操作" width="250" fixed="right">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="viewQuestions(scope.row)">查看题目</el-button>
              <el-button size="mini" type="warning" @click="editAssessment(scope.row)">编辑</el-button>
              <el-button
                size="mini"
                :type="scope.row.status === 1 ? 'danger' : 'success'"
                @click="toggleStatus(scope.row)"
              >
                {{ scope.row.status === 1 ? '禁用' : '启用' }}
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="pagination-wrapper">
          <el-pagination
            :current-page="searchForm.page"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="searchForm.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-card>
    </div>

    <!-- 添加/编辑测评对话框 -->
    <el-dialog :title="assessmentDialogTitle" :visible.sync="assessmentDialogVisible" width="50%">
      <el-form
        ref="assessmentForm"
        :model="assessmentForm"
        :rules="assessmentRules"
        label-width="100px"
      >
        <el-form-item label="测评名称" prop="name">
          <el-input v-model="assessmentForm.name" placeholder="请输入测评名称" />
        </el-form-item>
        <el-form-item label="分类" prop="category_id">
          <el-select v-model="assessmentForm.category_id" placeholder="请选择分类">
            <el-option label="就业" value="jiuye" />
            <el-option label="学习" value="study" />
            <el-option label="情感" value="emotion" />
          </el-select>
        </el-form-item>
        <el-form-item label="介绍" prop="introduction">
          <el-input
            v-model="assessmentForm.introduction"
            type="textarea"
            :rows="3"
            placeholder="请输入测评介绍"
          />
        </el-form-item>
        <el-form-item label="封面图片" prop="coverImg">
          <el-upload
            class="upload-demo"
            action="#"
            :http-request="handleCoverUpload"
            :show-file-list="false"
            accept="image/*"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2MB</div>
          </el-upload>
          <el-image
            v-if="assessmentForm.coverImgUrl"
            style="width: 100px; height: 60px; margin-top: 10px;"
            :src="assessmentForm.coverImgUrl"
            fit="cover"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="assessmentDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveAssessment">保存</el-button>
      </div>
    </el-dialog>

    <!-- 题目管理对话框 -->
    <el-dialog title="题目管理" :visible.sync="questionDialogVisible" width="80%">
      <div class="question-management">
        <div class="question-header">
          <h3>{{ currentAssessment.name }} - 题目列表</h3>
          <el-button type="primary" size="small" @click="showAddQuestionDialog">
            添加题目
          </el-button>
        </div>

        <!-- 题目列表 -->
        <el-table
          v-loading="questionLoading"
          :data="questionList"
          border
          fit
          highlight-current-row
          style="width: 100%; margin-top: 20px;"
        >
          <el-table-column label="ID" prop="questionId" align="center" width="80" />
          <el-table-column label="题目内容" prop="topic" min-width="200" />
          <el-table-column label="题型" prop="questionType" align="center" width="120">
            <template slot-scope="{row}">
              <el-tag v-if="row.questionType === 'choice'">选择题</el-tag>
              <el-tag v-else-if="row.questionType === 'judge'" type="success">判断题</el-tag>
              <el-tag v-else-if="row.questionType === 'voice'" type="warning">语音题</el-tag>
              <el-tag v-else-if="row.questionType === 'photo'" type="info">图片题</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="选项" min-width="300">
            <template slot-scope="{row}">
              <div v-if="row.options && row.options.length">
                <div v-for="(option, index) in row.options" :key="index">
                  {{ String.fromCharCode(65 + index) }}. {{ option }}
                </div>
              </div>
              <div v-else>-</div>
            </template>
          </el-table-column>
          <el-table-column label="排序" align="center" width="80">
            <template slot-scope="scope">
              {{
                (typeof scope.row.displayOrder === 'number' && scope.row.displayOrder > 0)
                  ? scope.row.displayOrder
                  : ((scope.row.sortOrder && scope.row.sortOrder > 0)
                    ? scope.row.sortOrder
                    : (scope.$index + 1))
              }}
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="150">
            <template slot-scope="{row}">
              <el-button type="primary" size="mini" @click="showEditQuestionDialog(row)">
                编辑
              </el-button>
              <el-button type="danger" size="mini" @click="handleDeleteQuestion(row)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 添加/编辑题目对话框 -->
        <el-dialog :title="questionDialogTitle" :visible.sync="questionFormVisible" width="60%" append-to-body>
          <el-form
            ref="questionForm"
            :model="questionForm"
            :rules="questionRules"
            label-width="100px"
          >
            <el-form-item label="题目内容" prop="topic">
              <el-input v-model="questionForm.topic" placeholder="请输入题目内容" />
            </el-form-item>
            <el-form-item label="题型" prop="question_type">
              <el-select v-model="questionForm.question_type" placeholder="请选择题型" @change="handleTypeChange">
                <el-option label="选择题" value="choice" />
                <el-option label="判断题" value="judge" />
                <el-option label="语音题" value="voice" />
                <el-option label="图片题" value="photo" />
              </el-select>
            </el-form-item>
            <el-form-item v-if="showOptions" label="选项" prop="options">
              <el-input
                v-for="(option, index) in questionForm.options"
                :key="index"
                v-model="questionForm.options[index]"
                :placeholder="'选项 ' + (index + 1)"
                style="margin-bottom: 10px;"
              >
                <el-button slot="append" icon="el-icon-delete" @click="removeOption(index)" />
              </el-input>
              <el-button type="primary" size="small" @click="addOption">添加选项</el-button>
            </el-form-item>
            <el-form-item label="排序" prop="sort_order">
              <el-input-number v-model="questionForm.sort_order" :min="0" />
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="questionFormVisible = false">取消</el-button>
            <el-button type="primary" @click="saveQuestion">保存</el-button>
          </div>
        </el-dialog>
      </div>
    </el-dialog>
  </div>
</template>

<!-- assessmentMixin.js -->
<script>
import assessmentMixin from '@/mixins/assessmentMixin'

export default {
  name: 'AssessmentManagement',
  mixins: [assessmentMixin]
}
</script>

<!-- assessment.scss -->
<style lang="scss" scoped>
@import '@/styles/assessment.scss';
</style>
